<template>
  <el-menu
    :default-active="this.$store.state.menus.editableTabsValue"
    class="el-menu-vertical-demo el-menu-style"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
  >
    <router-link to="/index">
      <el-menu-item
        index="`Index"
        @click="addTab({ name: 'Index', title: '首页' })"
      >
        <template slot="title">
          <i class="el-icon-s-home"></i>
          <span style="margin-right:28px">首页</span>
        </template>
      </el-menu-item>
    </router-link>
    <!-- 动态菜单生成 -->
    <el-submenu
      :index="item.name"
      v-for="(item, index) in this.menuList"
      :key="index"
    >
      <template slot="title">
        <i :class="item.icon"></i>
        <span>{{ item.title }}</span>
      </template>
      <router-link
        :to="child.path"
        v-for="(child, index) in item.children"
        :key="index"
      >
        <el-menu-item :index="child.name" @click="addTab(child)">
          <template slot="title">
            <i :class="child.icon"></i>
            <span>{{ child.title }}</span>
          </template>
        </el-menu-item>
      </router-link>
    </el-submenu>
  </el-menu>
</template>

<script>
//这里可以导入其他文件(比如:组件、工具js、)
//例如：import 组件名 from '组件路径'
export default {
  //import引入的组件需要注入到对象中才能使用
  data() {
    return {};
  },

  components: {},

  computed: {
    menuList: {
      get() {
        return this.$store.state.menus.menuList;
      }
    }
  },

  // mounted: {},

  methods: {
    //获取菜单列表
    getMenuList() {},
    //添加标签方法
    addTab(obj) {
      this.$store.commit("addTab", obj);
    }
    // JumpUser() {
    //   this.$router.push("/users");
    // },
    // JumpRole() {
    //   this.$router.push("/roles");
    // },
    // JumpMenu() {
    //   this.$router.push("/menus");
    // }
  }
  //生命周期 - 创建完成（可以访问当前this实例）
  // created: {}
};
</script>
<style scoped>
.el-menu-vertical-demo /deep/ .el-submenu__title {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* 消除router-link的下划线 */
/* .el-menu a {
  text-decoration: none;
}
.router-link-active {
  text-decoration: none;
} */
.el-aside /deep/ ul {
  background-color: royalblue;
}
</style>
